<template>
  <div>
    <h1>
      <span>todos</span>
      <div class="bar" v-if="user.userName">
        <p>
          <span>{{user.userName}}</span>
          <span @click="logonOut">退出登录</span>
        </p>
      </div>
      <div class="bar" v-else>
        <p>
          <router-link tag="span" :to="{name:'UserRegister'}">注册</router-link>
          <router-link tag="span" :to="{name:'UserLogin'}">登录</router-link>
        </p>
      </div>
    </h1>
    <router-view></router-view>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'Welcome',
  data(){
      return {
          active:"all"
      }
  },
  computed: mapState({
    user: state => state.user.user
  }),
  methods:{
      handleClick(){

      },
      logonOut(){
          this.$store.dispatch('user/LogOut')
          this.$router.replace({ name: 'UserLogin' })
      }
  }
}
</script>
<style lang="less" scoped>
h1 {
  font-size: 100px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, 0.15);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
  position: relative;
  .bar {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    p {
      width: 700px;
      margin: 0 auto;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 100%;
    }
    span {
      font-size: 14px;
      margin-left: 20px;
      cursor: pointer;
      color: #777;
    }
  }
}
</style>


